import React from 'react';
import { Menu } from 'antd';
import {
  AppstoreOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import { history } from 'umi';
import {IProps, IState} from './type'

export default class LeftNav extends React.Component<IProps, IState> {

  state = {
      openKey: ['sub1']
  }

  // 点击菜单切换路由和页面
  handleClick = (params: any): void => {
    let pathName = params.keyPath[1]
    history.push(pathName)
    this.props.spinLoading()
  };

  // 点击二级菜单，将最近一次点击的菜单赋值给开启的菜单
  onOpenChange = (keys: string[]): void => {
      this.setState({
          openKey: [keys[keys.length - 1]]
      })
      // console.log(keys);
  }

  render(): React.ReactNode {
    const { SubMenu } = Menu;
    return (
      <Menu
        onClick={this.handleClick}
        onOpenChange={this.onOpenChange}
        style={{ width: 256, minWidth:256, height: '100%' }}
        defaultSelectedKeys={['1']}
        openKeys={this.state.openKey}
        mode="inline"
      >
        <SubMenu key="sub1" icon={<AppstoreOutlined />} title="菜单1">
          <Menu.Item key="1">Option 1</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<SettingOutlined />} title="菜单2">
          <Menu.Item key="2">Option 2</Menu.Item>
        </SubMenu>
        <SubMenu key="sub3" icon={<SettingOutlined />} title="菜单3">
          <Menu.Item key="3">Option 3</Menu.Item>
        </SubMenu>
      </Menu>
    );
  }
}
